<template>
  <div class="search">

    <!-- 主体区域 -->
    <div class="search_main">
      <!-- 顶部搜索加tabs栏 -->
      <div class="head-contain">

        <div class="search-wrap">
          <div class="s-logo">
            <!-- <img src="@/assets/img/search-logo.png" alt="" /> -->
          </div>
          <div class="s-inp">
            <el-input class="search_inp" placeholder="请输入内容" v-model="searchCondition.videoTitle"
              @keyup.enter.native="searchConfirm" clearable size="midium">
            </el-input>
          </div>
          <div class="s-btn">
            <el-button class="search_btn" type="search" @click="searchConfirm">
              <i class="iconfont icon-sousuo search_logo"></i>
              <span class="search_title">搜索</span>
            </el-button>
          </div>
        </div>

        <el-tabs v-model="tabsActiveName" @tab-click="tabsClick">
          <el-tab-pane label="综合" name="first"></el-tab-pane>
          <el-tab-pane label="视频" name="second"></el-tab-pane>
          <el-tab-pane label="番剧" name="third"></el-tab-pane>
          <el-tab-pane label="影视" name="fourth"></el-tab-pane>
          <el-tab-pane label="直播" name="fifth"></el-tab-pane>
          <el-tab-pane label="专栏" name="sixth"></el-tab-pane>
          <el-tab-pane label="话题" name="seventh"></el-tab-pane>
          <el-tab-pane label="用户" name="eighth"></el-tab-pane>
        </el-tabs>
      </div>

      <div class="body-contain">
        <!-- 折叠区域 -->
        <el-collapse v-model="collapseActiveName" @change="foldChange" accordion>
          <el-collapse-item name="1">

            <template slot="title">
              <el-radio-group @change="orderChange" v-model="sortActive" size="mini">
                <el-radio-button label="综合排序"></el-radio-button>
                <!-- @click.native="comprehensiveSort" -->
                <el-radio-button label="最多播放"></el-radio-button>
                <!-- @click.native="mostClick" -->
                <el-radio-button label="最新发布"></el-radio-button>
                <!-- @click.native="latestRelease" -->
                <el-radio-button label="最多评论"></el-radio-button>
                <!-- @click.native="mostChat" -->
                <el-radio-button label="最多收藏"></el-radio-button>
                <!-- @click.native="mostCollection" -->
              </el-radio-group>
            </template>

            <!-- 展开的内容 -->
            <el-radio-group v-model="durationActive" size="mini">
              <el-radio-button label="全部时长" @click.native="currentTime = 0"></el-radio-button>
              <el-radio-button label="10分钟以下" @click.native="currentTime = 600"></el-radio-button>
              <el-radio-button label="10-30分钟" @click.native="currentTime = 1800"></el-radio-button>
              <el-radio-button label="30-60分钟" @click.native="currentTime = 3600"></el-radio-button>
              <el-radio-button label="60分钟以上" @click.native="currentTime = 9999"></el-radio-button>
            </el-radio-group>

            <!-- 分区 -->
            <el-radio-group class="allpartition" v-model="partitionActive" size="mini">
              <!-- 弹出框 -->
              <el-popover popper-class="partition-popover" v-for="(item, index) in partitionList" :key="index"
                placement="bottom" trigger="manual" @show="popoverShow(index)" @hide="popoverHide(index)"
                v-model="item.pvisible">
                <!-- 分区按钮 -->
                <button slot="reference" style="background-color: transparent; border: none" v-preventReClick="500"
                  @click="partitionClick(index, item.videoPartition)">
                  <!-- v-preventReClick="1000"用于节流 防止多次点击 -->
                  <el-radio-button class="partition-item" :label="item.pname">
                  </el-radio-button>
                </button>

                <!-- 弹出框里面的按钮 -->
                <div class="partition-item-i">
                  <el-radio-group size="mini" v-model="item.index">
                    <el-radio-button v-for="(item2, index2) in item.category" :key="index2" :label="index2"
                      v-preventReClick="500" @click.native="partitionItemClick($event, item2)">{{ item2 }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
              </el-popover>
            </el-radio-group>

          </el-collapse-item>
        </el-collapse>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 视频内容 -->
        <div v-show="mainDataYes">
          <div class="video-list">
            <!-- item-hover\enter() 的意思是高亮显示 -->
            <video-item class="main-data-item" v-for="(item, index) in mainDataList" :key="index" :video="item">
            </video-item>
          </div>
          <!-- 分页功能 -->
          <el-pagination background layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
            @size-change="handleSizeChange" :current-page="searchCondition.currentPage"
            :page-size="searchCondition.currentSize" :pager-count="11" :page-sizes="[30, 50, 200]"
            :total="mainDataListLength">
          </el-pagination>
        </div>

        <div class="video-list-no" v-show="!mainDataYes">
          <img src="@/assets/img/no-data.png" alt="" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { pageListVideo } from "@/api/video/video";

import VideoItem from "@/views/common/videoitem/VideoItem";
// 导入分区的静态数据
import partitionData from "./partitionList";

export default {
  name: "search",
  components: {
    VideoItem,
  },
  data() {
    return {
      // 激活的tabs
      tabsActiveName: "first",
      // 展开name为1的折叠板 就是仅有的那个折叠板
      collapseActiveName: "0",
      // 激活的综合排序
      sortActive: "综合排序",
      // 激活的时长
      durationActive: "全部时长",
      // 激活的全部分区
      partitionActive: "全部分区",
      // 全部分区的数据 partitionData(静态数据)
      partitionList: partitionData,
      // 主要内容数据
      mainDataList: [],
      mainDataListLength: 0,
      mainDataListCopy: [],
      // 判断是否有数据 显示没有数据图片
      mainDataYes: true,
      // 判断当前选择的时间
      currentTime: 0,
      // 鼠标移进的当前item
      currentIndex: null,

      // 列表查询接口的搜索条件
      searchCondition: {
        // 搜索输入框的数据  url 上的keyword
        videoTitle: this.$route.query.keyword,
        // 当前的排序方式
        currentOrder: "综合排序",
        // 当前页码
        currentPage: 1,
        currentSize: 30,
      },
    };
  },
  created() {
    this.getData();
  },

  watch: {
    // 监听当前选择的时间
    currentTime() {
      this.allTimeMethods();
    },
    // 监听主要内容数据
    // mainDataList(val) {
    //   if (val.total === 0) {
    //     this.mainDataYes = false;
    //     return;
    //   }
    //   this.mainDataYes = true;
    // },
  },

  methods: {
    tabsClick() {
      this.promptMessage();
    },
    // 获取内容数据
    async getData() {
      const { data: res } = await pageListVideo(this.searchCondition);
      if (res.data.total === 0) {
        this.mainDataYes = false;
      } else {
        this.mainDataYes = true;
        this.mainDataList = res.data.list;
        this.mainDataListCopy = res.data.list;
        this.mainDataListLength = res.data.total;
      }
      console.log();
    },

    // 确定搜索
    searchConfirm() {
      console.log(this.$router.history.current.query);
      if (this.searchCondition.videoTitle == "请输入内容" || this.searchCondition.videoTitle == "") {
        this.$message.warning("请输入搜索内容!");
        return;
      }
      // else if (this.searchCondition.videoTitle == this.$router.history.current.query.keyword) {
      // 会有闪烁
      // location.reload();
      //   return;
      // }
      this.getData();
      // 修改地址栏
      let query = this.$router.history.current.query;
      let path = this.$router.history.current.path;
      // 对象深拷贝
      let newQuery = this.$lodash.cloneDeep(query);
      // 地址栏的参数重新赋值
      newQuery.keyword = this.searchCondition.videoTitle;
      this.$router.push({ path, query: newQuery });
    },

    // 排序发生改变
    orderChange(val) {
      this.searchCondition.currentOrder = val;
      this.getData();
    },

    // 点击tab栏时间的方法，由前端进行过滤，而不是传给后台进行查询
    allTimeMethods() {
      let arr2 = this.$lodash.cloneDeep(this.mainDataListCopy);
      // 返回值是true还是false决定保留还是丢弃该元素。
      arr2 = arr2.filter((item) => {
        switch (this.currentTime) {
          case 0:
            return item.videoDuration;
          case 600:
            return item.videoDuration < 600;
          case 1800:
            return 600 <= item.videoDuration && item.videoDuration < 1800;
          case 3600:
            return 1800 <= item.videoDuration && item.videoDuration < 3600;
          default:
            return item.videoDuration >= 3600;
        }
      });
      this.mainDataList = this.$lodash.cloneDeep(arr2);
    },

    // 分区弹出框显示前 判断此刻是不是全部分区
    popoverShow(index) {
      if (index === 0) {
        this.partitionList[index].pvisible = false;
        return;
      }
    },

    // 分区弹出框隐藏后 index 清空
    popoverHide(index) {
      if (this.partitionList[index].index === undefined) {
        return;
      }
      this.partitionList[index].index = null;
    },

    // 分区被点击了，由前端进行过滤，而不是传给后台进行查询
    partitionClick(i, item) {
      // 对话框的显示与隐藏
      this.partitionList.forEach((value, index) => {
        if (index === i) {
          this.partitionList[index].pvisible = true;
        } else {
          this.partitionList[index].pvisible = false;
        }
      });
      // 点击了全部分区
      if (i === 0) {
        this.mainDataList = this.$lodash.cloneDeep(this.mainDataListCopy);
        return;
      }
      // 处理其他分区数据
      let arr = this.$lodash.cloneDeep(this.mainDataListCopy);
      let arr2 = [];
      // 从所有数据中 筛选出符合点击的分区的内容
      // item 就是传入的分区
      arr.forEach((value) => {
        if (item === value.typename) {
          arr2.push(value);
        }
      });
      this.mainDataList = this.$lodash.cloneDeep(arr2);
    },

    // 分区里面的对话框被点击了，由前端进行过滤，而不是传给后台进行查询
    partitionItemClick(e, item) {
      // 防止点击两次
      // 因为原生click事件会执行两次，第一次在label标签上，
      // 第二次在input标签上，故此处理
      if (e.target.tagName === "INPUT") return;
      this.promptMessage();
      let arr = this.$lodash.cloneDeep(this.mainDataListCopy);
      let arr2 = [];
      arr.forEach((value) => {
        if (item === value.typename) {
          arr2.push(value);
        }
      });
      this.mainDataList = this.$lodash.cloneDeep(arr2);
    },

    // 折叠区域的改变
    foldChange() {
      this.partitionList.forEach((value, i) => {
        this.partitionList[i].pvisible = false;
      });
    },

    // 当前页发生改变
    handleCurrentChange(val) {
      this.searchCondition.currentPage = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.searchCondition.currentSize = val;
      this.getData();
    },

    // 提示信息
    promptMessage() {
      this.$message.warning("此页面还没有做好哦!");
    },
  },
};
</script>

<style scoped>
.search {
  min-width: 1000px;
}

.search_main {
  margin: 0 auto;
  width: 1000px;
}

.head-contain {
  padding-top: 40px;
}

.search-wrap {
  display: flex;
  width: 50%;
  margin: 0 auto;
}

.s-inp {
  flex: 1;
  margin: 0 10px;
}

.s-btn {
  width: 90px;
  height: 40px;
}

.search_btn {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 100%;
  font-size: 16px;
  padding: 0;
}

.search_logo {
  position: absolute;
  left: 5px;
  top: 11px;
  font-size: 36px;
}

.search_title {
  margin-left: 20px;
}

/* tab栏 */
.el-tabs {
  margin-top: 20px;
}

/* 折叠区域 */
.el-collapse {
  border: 0;
}

.allpartition {
  margin-top: 10px;
}

/* 分区 */
.partition-item {
  margin-right: 4px;
}

/* 视频内容 */
.video-list {
  display: flex;
  flex-wrap: wrap;
}

.main-data-item {
  margin-top: 20px;
  margin-right: 25px;
}

.main-data-item:nth-child(5n) {
  margin-right: 0;
}

.video-list-no {
  margin: 50px;
  text-align: center;
}

/* 鼠标移进来添加的类名 */
.item-hover {
  background: rgba(223, 223, 223, 0.3);
}

/* 分页 */
.el-pagination {
  margin: 40px;
  text-align: center;
  background: "#00a1d6";
}
</style>